/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import '../../../styles/variables.scss';

$modeless-width: 880px;
$sidepanel-width: 170px;
$modeless-header-height: 60px;
$header-close-icon-size: 16px;

// The modeless-container doesn't have an overflow property defined here
// In all our usecases we don't have the entire modeless scrolling since we have
// a static header and a footer and only the content scrolls.
.pipeline-modeless {
  z-index: 1300;

  .pipeline-modeless-arrow {
    position: absolute;
    font-size: 7px;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: white;
    z-index: -1;
  }

  &.arrow[x-placement^="bottom"] {
    margin-top: 10px;
    .pipeline-modeless-arrow {
      border-right: 1px solid #e0e0e0; // Match mui Paper border
      border-bottom: 1px solid #e0e0e0;
      top: -6px;
      transform: rotate(-135deg);
    }
  }

  .pipeline-modeless-container {
    min-width: $modeless-width;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    color: $grey-01;
    background-color: white;
    max-height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    margin: 0 50px;

    .pipeline-modeless-header {
      background-color: $grey-08;
      height: $modeless-header-height;
      min-height: $modeless-header-height;
      padding: 0 15px;
      border-radius: 4px 4px 0 0;
      border-bottom: 1px solid $grey-05;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 0;

      .pipeline-modeless-title {
        color: $grey-01;
        max-width: 80%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-weight: 500;
        margin: 0 auto 0 0;
        font-size: $header-close-icon-size;
        line-height: 20px;
      }
      .btn {
        padding: 0;
      }

      .secondary-title {
        padding-right: 20px;
      }

      .btn .fa-remove,
      .btn .icon-close {
        color: $grey-01;
        width: $header-close-icon-size;
        height: $header-close-icon-size;
      }
    }

    .pipeline-modeless-content {
      display: flex;
      height: calc(100% - #{$modeless-header-height});
      overflow-y: hidden;
    }
    .cask-configurable-tab {
      height: 100%;
      width: 100%;

      .cask-tabs.vertical {
        min-height: inherit;
        max-height: inherit;

        > div {
          &:nth-child(2) {
            width: calc(100% - #{$sidepanel-width});
          }
          &:first-child {
            width: $sidepanel-width;
            padding: 0;
            background: transparent;
            border-right: 1px solid $grey-05;
          }

          &.cask-tab-headers {
            text-align: left;
            .cask-tab-head {
              border-bottom: 1px solid $grey-05;
              padding: 10px 10px 10px 20px;
              &.active-tab {
                color: var(--brand-primary-color);
                background: $grey-07;
                border-left: 0;
              }
              span {
                &.tab-header-icon {
                  margin: 0 5px;
                  .icon-sliders.icon-svg {
                    transform: rotate(90deg);
                  }
                }
              }
            }
          }
          &.tab-content {
            .tab-pane {
              width: 100%;
              margin: 16px 30px 40px 50px;
              font-size: 14px;
              position: relative;
              text-align: left;
            }
          }
          &.tab-content {
            &.compute-profile-tab {
              .tab-pane {
                margin: 10px;
              }
            }
          }
        }
      }
    }
  }

  &.full-screen .pipeline-modeless-container {
    width: 100%;
    height: calc(100% - 60px);
    margin: 0;
  }
}
